(function (Vue) {
    'use strict';
    // Your starting point. Enjoy the ride!
    var vm = new Vue({
        el: ".wrapper",
        data: {
            persons: [],
            states: [],
            warningInfo: [],
            interval: 2000
        },
        mounted() {
            this.getPersonData();
            this.getStatesData();
            this.getWarningData();
            this.drawOee();
            this.getOeeData();
        },
        created: function () {
            $.ajax({
                url: "../linyang/json/interval.json",
                type: "post",//请求方式为get
                dataType: "json",
                // async: true,
                success: function (data) {
                    this.interval = data.interval;
                }
            })
        },
        computed: {
            /**
             * 获取指定日期(字符串类型)到当前时间的天数
             * @param {Object} sDate1 格式:2018-01-04
             */
            dateDiff: function () {
                const sDate1 = "2018-04-23";
                var date2 = new Date();
                var date1 = new Date(Date.parse(sDate1.replace(/-/g, "/")));
                var iDays = parseInt(Math.abs(date2.getTime() - date1.getTime()) / 1000 / 60 / 60 / 24);
                return iDays;
            },
        },
        methods: {
            getPersonData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/production/person.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {
                            // alert(data);
                            _this.persons = data;
                        }
                    })
                }, _this.interval)
            },
            getStatesData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/production/states.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {
                            _this.states = data;
                        }
                    })
                }, _this.interval)
            },
            getWarningData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/production/warning.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {
                            _this.warningInfo = data;
                        }
                    })
                }, _this.interval)
            },
            getOeeData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/production/oee.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {
                            var [subState, time] = [[], []];

                            data.forEach(item => {
                                subState.push(item.subState);
                                time.push(item.time);
                            });
                            _this.drawOee(time, subState)
                        }
                    })
                }, _this.interval)
            },
            drawOee(xData, yData) {
                // console.log(typeof yData)
                var myChart = echarts.init(document.getElementById('oee'));
                var grayBar = [100, 100, 100, 100];

                var option = {
                    grid: {
                        top: '1%',
                        left: '1%',
                        right: '0',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        show: false
                    },
                    yAxis: {
                        type: 'category',
                        data: ['PM(维护)', 'IDLE(等待)', 'DOWN(故障)', 'RUN(运行)'],
                        // date: yData,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            width: 0,
                            color: '#fff'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    series: [
                        {
                            // show: true,
                            type: 'bar',
                            barGap: '-100%',
                            barWidth: '30%', //统计条宽度
                            itemStyle: {
                                normal: {
                                    // barBorderRadius: 20,
                                    color: 'rgb(67,111,171)'
                                },
                            },
                            z: 1,
                            data: grayBar,
                        },
                        {
                            // show: true,
                            type: 'bar',
                            barGap: '-100%',
                            barWidth: '30%', //统计条宽度
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, color: '#fff', position: 'right',
                                        textStyle: {
                                            color: 'black'
                                        }
                                    },
                                    color: '#32DAD5'
                                }
                            },
                            // data: [4, 4, 10, 80]
                            data: xData
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        }
    });
})(Vue);